3 Meteoric and JSRender

In response to a request, not everyone wants to use JavaScript to build their HTML! Here is an example of using Boris Moore's excellent JSRender templating framework. In reality, you can use any templating framework you want...

<div id="templatedView"/>

// Build a JSRender template for a "Customer"
<script id="customerTemplate" type="text/x-jsrender">
	<h2>{{:name}} ({{:id}})</h2>
	<p><b>Credit Limit:</b> {{:creditLimit}}<br />
	<b>Balance: 
		{{if balance > creditLimit }}
			<span style="color:#FF0000">{{:balance}}</span>
		{{else}}
			{{:balance}}
		{{/if}}<br />
	<b>Credit Days:</b> {{:creditDays}}
	</p>
</script>

<script type="text/javascript">
	// Build the entity
	var entity = {
		// Customer 'type'
		"type": "customer",
		"id": 1234,
		"name": "John Smith, Inc.",
		"creditLimit": 5000.00,
		"balance": 5850.50,				// Overdrawn!
		"creditDays": 28
	};

	// Create a writer for the 'customer' type:
	$.meteoric.writers.customer = function (context, entity) {
		var fieldDisplay;
	
		fieldDisplay = $("#customerTemplate").render(entity);
	
		context.parent.append(fieldDisplay);
	};

	$("#templatedView").meteoric({ entity: entity });
</script>

Output: